<template>
    <section>
        <ul class="ul_fileList">


            <li v-for="(file,index) in fileList" @dblclick="downFile(file)">


                <el-popover v-if="file.isImg" trigger="hover" placement="top">
                    <div>
                        <img :src="file.url" class='f2' />
                    </div>
                    <img slot="reference" v-on:click='selFile(file,index)' v-bind:class="{ default: file.isDefault }" :src="file.url" alt="">
                </el-popover>
                <el-popover v-else trigger="hover" placement="top">
                    <div style="text-align:center">
                        <h5>{{file.name}}</h5>
                        <a :href="file.url">下载链接</a></div>
                    <span slot="reference" v-text="file.ext" class='sp_ext'></span>
                </el-popover>

                <!--<el-tooltip class="item" effect="dark" content="双击可下载" placement="top-start">
                    <img v-on:click='selFile(file,index)' v-if="file.isImg" v-bind:class="{ default: file.isDefault }" :src="file.url" alt="">
                    <span v-else v-text="file.ext" class='sp_ext'></span>
                </el-tooltip>-->
                <div class="div_btn">
                    <el-button icon="delete" size="mini" v-on:click='delFile(file,index)'></el-button>
                </div>

            </li>

        </ul>


    </section>

</template>

<script src="./imgSel.js"></script>
<style lang="scss" scoped>
    .ul_fileList {
        margin: 0px;
        padding: 0px
    }

    .ul_fileList li {
        float: left;
        display: block;
        width: 60px;
        height: auto;
        line-height: 20px;
        cursor: pointer;
        text-align: center;
    }

    .ul_fileList li span.sp_ext {
        display: block;
        width: 58px;
        border: 1px solid #eee;
        line-height: 54px;
        margin-bottom: 5px;
        margin-right: 3px;
        margin-left: 3px;
    }

    .ul_fileList li img {
        border: 3px solid #eee;
        width: 50px;
        height: 50px;
        margin: 0;
        padding: 0;
    }

    .ul_fileList li img.default {

        border-color: #ffc73e;
        border-width: 3px;
    }

    .div_btn {
        margin-top: 0;
        text-align: center;
        height: 20px;
        line-height: 20px;
    }
</style>